// 导入React
import React from "react";

/**
 * 受控组件示例
 * 
 * 注意 复选框 是根据 checked 属性获取状态值的
 */
class App extends React.Component{

    constructor(props) {
        super(props)
        // 表单状态
        this.state = {
           txt:'xx', // 文本框
           content: 'content', // 文本域
           city: 'bj', // 下拉框
           isChecked: true, // 复选框

        }
      }

    handleChange = (e) => {
        console.log(e.target.name)
        // if(e.target.name === 'isChecked'){ // 这里的判断条件可以继续优化
        if(e.target.type === 'checkbox'){ // 这里的判断条件可以继续优化
            this.setState({
                [e.target.name] : e.target.checked
            })
        }else{
            this.setState({
                [e.target.name] : e.target.value
            })
        }
    }

    // // 文本变化
    // handleTxt = (e) => {
    //     // 改变state
    //     this.setState({
    //         txt: e.target.value
    //     })
    // }
    // // 文本域变化
    // handleContent = (e) => {
    //     this.setState({
    //         content: e.target.value
    //     })
    // }
    // // 下拉框变化
    // handleCity = (e) => {
    //     this.setState({
    //         city: e.target.value
    //     })
    // }
    // // 复选框变化
    // handleIsChecked = (e) => {
    //     this.setState({
    //         isChecked: e.target.checked
    //     })
    // }

    render() {
        console.log(this.state)
        return (
            <div>
                {/* 文本框 */}
                <input type='text' name='txt' value={this.state.txt} onChange={this.handleChange}></input>
                <hr/>

                {/* 文本域 */}
                <textarea name='content' value={this.state.content}  onChange={this.handleChange}></textarea>
                <hr/>

                {/* 下拉框 */}
                <select name='city' value={this.state.city} onChange={this.handleChange}>
                    <option value='sh'>上海</option>
                    <option value='bj'>北京</option>
                    <option value='gz'>广州</option>
                </select>
                <hr/>

                {/* 复选框 */}
                <input name='isChecked' type='checkbox' checked={this.state.isChecked} onChange={this.handleChange}></input>
            </div>
        )
    }

}

export default App
